import Taro, { Component } from '@tarojs/taro'
import * as Tong from '../../tong'
import ClassNames from 'classnames'
import { View, ScrollView } from '@tarojs/components'
import './index.scss'


const ENV = Taro.getEnv()

class LiTabsTitle extends Component {
    static options = { addGlobalClass: true}
	static defaultProps = {
		// 数据列表
		tabList: [],
		// 当前下标
		current: 0,
		// activeColor
		color: '',
		// 基础颜色
		textColor: '',
		// 允许滚动
		scroll: true,
		// 是否开启标题flex：1
		itemFlex: '',
		// 更改事件
		onChange: () => { }
    }
    constructor() {
		super(...arguments)
		this.state = {
			_scrollLeft: '',
			_scrollTop: '',
			_scrollIntoView: ''
		}
		this._tabId = `li-${Tong.randomString(16)}`
	}
	updateState = idx => {
		// 标签栏滚动
		switch (ENV) {
			case Taro.ENV_TYPE.WEAPP:
			case Taro.ENV_TYPE.ALIPAY:
			case Taro.ENV_TYPE.SWAN:
				this.setState({
					_scrollIntoView: `tab${idx - 1}`
				})
				break

			case Taro.ENV_TYPE.WEB: {
				const index = Math.max(idx - 1, 0)
				const prevTabItem = this.tabHeaderRef.childNodes[index]
				prevTabItem && this.setState({
					_scrollTop: prevTabItem.offsetTop,
					_scrollLeft: prevTabItem.offsetLeft
				})
				break
			}

			default:
				console.warn('AtTab 组件在该环境还未适配')
				break
		}
	}
	componentWillReceiveProps (nextProps) {
		if (nextProps.current !== this.props.current) {
			this.updateState(nextProps.current)
		}
	}
	getTabHeaderRef () {
		if (ENV === Taro.ENV_TYPE.WEB) {
			this.tabHeaderRef = document.getElementById(this._tabId)
		}
	}
	componentDidMount () {
		this.getTabHeaderRef()
		this.updateState(this.props.current)
	}

	componentWillUnmount () {
		this.tabHeaderRef = null
	}
    render () {
        const {
            props: {tabList, current, textColor, onChange, scroll, itemFlex },
		} = this
		const {
			state: {_scrollLeft, _scrollTop,_scrollIntoView}
		}= this
		const tabsItem = tabList.map((item, index) => {
			const active = current === index
			const itemCls = ClassNames({
				'li-tabs_title-item': true,
				'li-tabs_title-item-active': active
            })
        return <View
					className={itemCls}
					onClick={onChange.bind(this, index)}
					id={`tab${index}`}
					style={{
						color: active ? color : textColor,
						flex: itemFlex ? itemFlex : 1
					}}>
                {item.title}
                {/* 点 */}
                {item.dot && <View className='li-tabs_title-item-dot'></View>}
                {/* 角标/徽章 */}
                {item.badge && <View className='li-tabs_title-item-badge'>{item.badge}</View>}
                <View
                    className='li-tabs_title-item-line'
                    style={{
                        backgroundColor: color,
                        width: `${item.title.length}em`,
                        left: '50%',
                        marginLeft: `${-(item.title.length / 2)}em`
                    }}
                ></View>
            </View>
    })
        return (
            <View className='li-tabs_title'>
				{scroll ?
						<ScrollView
							id={this._tabId}
							className='li-tabs_title-box'
							scrollX
							scrollWithAnimation
							scrollLeft={_scrollLeft}
							scrollTop={_scrollTop}
							scrollIntoView={_scrollIntoView}>
							{tabsItem}
						</ScrollView>		
				 :
				<View id={this._tabId} className='li-tabs_title-box'>{tabsItem}</View>}		
			</View>
        )
    }
}

export default  LiTabsTitle